<template>
   <el-button :disabled="disabled" :size="size" plain :type="type" :loading="btnLoading" @click="onClick">
    <span data-flex="cross:center" v-if="icon && !btnLoading">
      <os-icon :size="size" :name="icon" class="m-r-4"></os-icon>
      <span v-if="text">{{ text }}</span>
    </span>
    <span v-else-if="!icon">
      <span v-if="text">{{ text }}</span>
    </span>
  </el-button>
</template>
<script>
export default {
  name: 'OsButton',
  props: {
    size: String,
    type: { type: String, default: 'primary' },
    icon: String,
    text: String,
    loading: Boolean,
    disabled: Boolean
  },
  data () {
    return {
      btnLoading: false
    }
  },
  methods: {
    onClick () {
      if (this.btnLoading) return
      if (this.loading) {
        this.btnLoading = true
      }
      this.$emit('click', () => (this.btnLoading = false))
    }
  }
}
</script>
